<template>
	<view class="container">
		<!-- 空白页 -->
		<view v-if="!hasLogin || empty===true" class="empty">
			<image src="/static/img/icon/emptyCart.jpg" mode="aspectFit"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="hasLogin" url="/pages/home/home" open-type="switchTab">随便逛逛></navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" @click="navToLogin">去登陆></view>
			</view>
		</view>
		<view v-else>
			<!-- 列表 -->
			<view class="cart-list">
				<view class="seller_box">
					<view class="seller_name">
						<view class="coolc icon-cheng checked"></view>
						<b>古驰GUCCI官方旗舰店</b>
					</view>
				</view>
				<block v-for="(item, index) in cartList" :key="item.id">
					<view class="cart-item" :class="{'b-b': index!==cartList.length-1}">
						<view class="image-wrapper">
							<image :src="item.image" 
								:class="[item.loaded]"
								mode="aspectFill" 
								lazy-load 
								@load="onImageLoad('cartList', index)" 
								@error="onImageError('cartList', index)"
							></image>
							<view class="coolc icon-cheng checkbox"
								:class="{checked: item.checked}"
								@click="check('item', index)"
							></view>
						</view>
						<view class="item-right">
							<text class="title">{{item.title}}</text>
							<span class="attr">规格: {{item.attr_val}}</span>
							<text class="price">¥{{item.price}}</text>
							<uni-number-box 
								class="step"
								:min="1" 
								:max="item.stock"
								:value="item.number>item.stock?item.stock:item.number"
								:isMax="item.number>=item.stock?true:false"
								:isMin="item.number===1"
								:index="index"
								@eventChange="numberChange"
							></uni-number-box>
						</view>
						<text class="del-btn coolc icon-cuohao" @click="deleteCartItem(index)"></text>
					</view>
				</block>
			</view>
			<!-- 底部菜单栏 -->
			<view class="action-section">
				<view class="checkbox">
					<image :src="allChecked?'/static/img/icon/selected.png':'/static/img/icon/select.png'" mode="aspectFit" @click="check('all')"></image>
					<view class="clear-btn" :class="{show: allChecked}" @click="clearCart">清空</view>
				</view>
				<view class="total-box">
					<view class="price">¥{{total}}</view>
					<view class="coupon">
						已优惠 <text>¥74.35</text>元
					</view>
				</view>
				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				total: 0, //总价格
				allChecked: false, //全选状态  true|false
				empty: false, //空白页现实  true|false
				cartList: [],
			};
		},
		onLoad(){
			this.loadData();
		},
		watch:{
			//显示空白页
			cartList(e){
				let empty = e.length === 0 ? true: false;
				if(this.empty !== empty){
					this.empty = empty;
				}
			}
		},
		computed:{
			...mapState(['hasLogin'])
		},
		methods: {
			//请求数据
			async loadData(){
				let list = await this.$api.json('cartList'); 
				let cartList = list.map(item=>{
					item.checked = true;
					return item;
				});
				this.cartList = cartList;
				this.calcTotal();  //计算总价
			},
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image = '/static/img/icon/errorImage.jpg';
			},
			navToLogin(){
				uni.navigateTo({
					url: '/pages/simple/login'
				})
			},
			 //选中状态处理
			check(type, index){
				if(type === 'item'){
					this.cartList[index].checked = !this.cartList[index].checked;
				}else{
					const checked = !this.allChecked
					const list = this.cartList;
					list.forEach(item=>{
						item.checked = checked;
					})
					this.allChecked = checked;
				}
				this.calcTotal(type);
			},
			//数量
			numberChange(data){
				this.cartList[data.index].number = data.number;
				this.calcTotal();
			},
			//删除
			deleteCartItem(index){
				let list = this.cartList;
				let row = list[index];
				let id = row.id;

				this.cartList.splice(index, 1);
				this.calcTotal();
				uni.hideLoading();
			},
			//清空
			clearCart(){
				uni.showModal({
					content: '清空购物车？',
					success: (e)=>{
						if(e.confirm){
							this.cartList = [];
						}
					}
				})
			},
			//计算总价
			calcTotal(){
				let list = this.cartList;
				if(list.length === 0){
					this.empty = true;
					return;
				}
				let total = 0;
				let checked = true;
				list.forEach(item=>{
					if(item.checked === true){
						total += item.price * item.number;
					}else if(checked === true){
						checked = false;
					}
				})
				this.allChecked = checked;
				this.total = Number(total.toFixed(2));
			},
			createOrder(){
				let list = this.cartList;
				let sendData = [];
				list.forEach(item=>{
					if(item.checked){
						sendData.push({
							attr_val: item.attr_val,
							number: item.number
						})
					}
				})
				uni.reLaunch({
					url:'/pages/order/cart2'
				});
			}
		}
	}
</script>

<style lang='scss'>
	page { background:#ffffff; }
	.container{
		padding-bottom:110upx;
		/* 空白页 */
		.empty{
			position:fixed; left:0; top:0; width:100%; height:100vh; padding-bottom:100upx; display:flex; justify-content:center; flex-direction:column; align-items:center;
			
			image{ width:240upx; height:160upx; margin-bottom:30upx; }
			.empty-tips{
				display:flex; font-size:$font-sm+2upx; color:$font-color-disabled;
				
				.navigator{ color:$uni-color-primary; margin-left:16upx; }
			}
		}
	}
	.cart-list { border-bottom:15upx solid #f4f4f4; }
	.cart-list:nth-last-child(1) { border-bottom:0upx; }
	.seller_box {
		width:100%; height:80upx; line-height:80upx; flex:1; display:flex; flex-direction:column; padding:0 30upx; border-bottom:1px solid #eeeeee;
		
		.seller_name { width:100%; }
		.seller_name .coolc,.seller_name b { display:block; float:left; font-size:44upx; color:$font-color-disabled; margin-right:15upx; }
		.seller_name .coolc { margin-left:-12upx; margin-top:6upx; }
		.seller_name b { height:80upx; line-height:80upx; font-size:32upx; font-weight:500; color:#666666; }
	}
	
	/* 购物车列表项 */
	.cart-item{
		display:flex; position:relative; padding:30upx; border-bottom:1px solid #eeeeee;
		.image-wrapper{
			width:230upx; height:230upx; flex-shrink:0; position:relative;
			image{ width:230upx; height:230upx; border-radius:8upx; }
		}
		.checkbox{
			position:absolute;
			left:-16upx;
			top:-16upx;
			z-index:8;
			font-size:44upx; color:$font-color-disabled;
			line-height:1;
			padding:4upx;
			background:#fff;
			border-radius:50px;
		}
		.item-right{
			width:100%; overflow:hidden; position:relative; padding-left:30upx;
			
			.title { font-size:$font-base + 2upx; color:$font-color-dark; height:auto; display:table; line-height:40upx; margin-bottom:10upx; overflow:hidden; padding-right:40upx; }
			.attr{ width:auto; height:50upx; line-height:50upx; display:inline-block; padding:0 22upx; font-size:$font-sm + 2upx; color:$font-color-light; background:#eeeeee; border-radius:30upx; }
			.price{ height:70upx; line-height:70upx; font-size:30upx; color:#d10045; position:absolute; right:0px; bottom:0px; }
		}
		.del-btn{ width:30upx; padding:4upx 0; text-align:center; font-size:34upx; height:50upx; line-height:40upx; position:absolute; right:30upx; top:30upx; color:$font-color-light; }
	}
	.cart-item:nth-last-child(1) { border-bottom:0px; }
	
	/* 底部栏 */
	.action-section{
		position:fixed;
		left:0upx;
		bottom:var(--window-bottom);
		z-index:95;
		display:flex;
		align-items:center;
		width:750upx;
		height:110upx;
		padding:0 26upx;
		background:#ffffff; border-top:1px solid #eee;
		
		.checkbox{
			height:52upx; position:relative;
			
			image{ width:52upx; height:100%; position:relative; z-index:5; }
		}
		.clear-btn{
			position:absolute;
			left: 26upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			padding-left: 38upx;
			font-size: $font-base;
			color: #fff;
			background: $font-color-disabled;
			border-radius:0 50px 50px 0;
			opacity: 0;
			transition: .2s;
			&.show{
				opacity: 1;
				width: 120upx;
			}
		}
		.total-box{
			flex:1; display:flex; flex-direction:column; text-align:right; padding-right:40upx;
			
			.price{ font-size:36upx; font-weight:bold; height:36upx; line-height:36upx; color:#ff4200; }
			.coupon{
				font-size:$font-sm; color:$font-color-light; 
				
				text{ color:$font-color-dark; }
			}
		}
		.confirm-btn{
			padding:0 38upx;
			margin:0 -6upx 0 0;
			height:66upx;
			line-height:66upx;
			font-size:$font-base + 2upx;
			background:$vui_bgcolor;
		}
	}
	/* 复选框选中状态 */
	.action-section .checkbox.checked,.cart-item .checkbox.checked{ color:$vui_bgcolor; }
	.uni-tabbar { box-shadow:0px 0px 3px #ccc !important; }
</style>